<template>
  <div class="mv-container">
    <el-card class="left-card-wrap">
      <div class="video-wrap">
        <!-- <video
          controls
          :src="mvSrc.url"
          autoplay
          controlslist="nodownload"
        ></video> -->
      </div>

      <div class="mv-info-wrap">
        <p>{{ mvDetail.name }}</p>
        <span>发布: {{ mvDetail.publishTime }}</span>
        <span>播放: {{ mvDetail.playCount }}</span>
      </div>
    </el-card>
    <el-card class="right-card-wrap">
      <template #header>
        <div class="card-header">
          <span>相关推荐</span>
          
          
        </div>
      </template>
      <div class="recommend-mv" v-for="item in simiMvList"  :key="item.id" >
            <recommend-mv :newMv="item"></recommend-mv>
      </div>

    </el-card>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { HttpManager } from "../api/index";

import recommendMv from "../components/Home/Recommend-MV.vue"
export default defineComponent({
  components:{recommendMv},
  setup() {
    const route = useRoute();
    const router = useRouter();

    const mvDetail = ref({});
    const mvSrc = ref("");
    const simiMvList = ref([]);

    const mvId = ref(route.params.mvid);

    const getmvDetail = async (mvid) => {
      //获取mv信息

      await HttpManager.getmvDetail({ mvid }).then((res) => {
        console.log("Res", res);
        mvDetail.value = res.data;
      });
    };

    const getmvSrc = async (id) => {
      console.log("mvid", id);
      await HttpManager.getmvSrc({ id }).then((res) => {
        console.log("Res", res);
        mvSrc.value = res.data;
      });
    };

    const getSimiMv = async(id) => {

      await HttpManager.getSimiMv({id}).then((res:any) => {
         console.log("Res", res);
         simiMvList.value = res.mvs
      })

    }
    console.log("route", route);
    getmvDetail(mvId.value);
    getmvSrc(mvId.value);
    getSimiMv(mvId.value)

    return {
      mvDetail,
      mvSrc,
      simiMvList,
      getmvDetail,
    };
  },
});
</script>
 
<style lang = "scss" scoped>
@import "../assets/css/mv-detail.scss";
</style>